<template>
  <div v-if="processInstanceRemark && processInstanceRemark.length > 0" class="mt-20px">
    <div class="font-bold mb-10px text-16px">流程备注</div>
    <el-timeline class="pt-10px">
      <!-- 遍历每个备注 -->
      <el-timeline-item
        v-for="(remark, index) in processInstanceRemark"
        :key="index"
        size="large"
        color="#3f73f7"
      >
        <template #dot>
          <div
            class="position-absolute left--10px top--6px rounded-full border border-solid border-#dedede w-30px h-30px flex justify-center items-center bg-#3f73f7 p-5px"
          >
            <Icon icon="ep:chat-dot-round" color="#fff" :size="18"/>
          </div>
        </template>
        <div class="flex flex-col items-start gap2">
          <!-- 第一行：用户信息和时间 -->
          <div class="flex w-full items-center">
            <div
              class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600"
            >
              <el-avatar
                class="!m-5px"
                :size="28"
                v-if="remark.avatar"
                :src="remark.avatar"
              />
              <el-avatar class="!m-5px" :size="28" v-else-if="remark.nickname">
                {{ remark.creatorName?.substring(0, 1) }}
              </el-avatar>
              <span class="text-14px">{{ remark.creatorName || '未知用户' }}</span>
            </div>
            <!-- 信息：时间 -->
            <div class="text-#a5a5a5 text-13px ml-auto">
              {{ formatDate(remark.createTime) }}
            </div>
          </div>
          <!-- 第二行：备注内容 -->
          <div
            class="text-#333 text-14px mt-1 w-full bg-#f8f8fa p-10px rounded-md"
            v-html="remark.remark"
          ></div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup lang="ts">
import type {ProcessInstanceRemark} from '@/api/bpm/task/remark'
import {formatDate} from "@/utils/formatTime";

defineOptions({name: 'BpmProcessInstanceRemarkTimeline'})

const props = withDefaults(
  defineProps<{
    processInstanceRemark: ProcessInstanceRemark[] // 备注信息列表
  }>(),
  {
    processInstanceRemark: () => []
  }
)
</script>

<style lang="scss" scoped>
:deep(.el-timeline-item__node) {
  left: -1px;
}
</style>
